[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import QRCodeGenerator from '@/components/qr-code-generator' export default function Home() { return (

) } [V0_FILE]json:file=".vscode/launch.json" isMerged="true" { "version": "0.2.0", "configurations": [ { "name": "Next.js: debug server-side", "type": "node-terminal", "request": "launch", "command": "npm run dev" }, { "name": "Next.js: debug client-side", "type": "chrome", "request": "launch", "url": "http://localhost:3000" }, { "name": "Next.js: debug full stack", "type": "node-terminal", "request": "launch", "command": "npm run dev", "serverReadyAction": { "pattern": "started server on .+, url: (https?://.+)", "uriFormat": "%s", "action": "debugWithChrome" } } ] } [V0_FILE]typescriptreact:file="components/qr-code-generator.tsx" isEdit="true" isQuickEdit="true" "use client" import React, { useState, useRef } from 'react' import { QRCodeSVG } from 'qrcode.react' import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Download, RefreshCw, LinkIcon } from 'lucide-react' export default function QRCodeGenerator() { const [url, setUrl] = useState('') const qrRef = useRef(null) const handleUrlChange = (e: React.ChangeEvent) => { setUrl(e.target.value) } const downloadQRCode = () => { if (!qrRef.current) return; const canvas = document.createElement("canvas"); const svg = qrRef.current; const base64doc = btoa(unescape(encodeURIComponent(svg.outerHTML))); const w = parseInt(svg.getAttribute("width") || "0"); const h = parseInt(svg.getAttribute("height") || "0"); const img_to_download = document.createElement('img'); img_to_download.src = 'data:image/svg+xml;base64,' + base64doc; img_to_download.onload = function () { canvas.setAttribute('width', w.toString()); canvas.setAttribute('height', h.toString()); const context = canvas.getContext('2d'); if (context) { context.drawImage(img_to_download, 0, 0, w, h); const dataURL = canvas.toDataURL('image/png'); const link = document.createElement('a'); link.download = 'QRCode.png'; link.href = dataURL; link.click(); } }; }; return (

QR Code Generator

{url ? (

) : (

Enter a URL to generate a QR code

)}

) }

About

Tags

Share

More from patelmaya9812-4362

More Templates Like This

About

Tags

Share

About

Tags

Share

More from patelmaya9812-4362

More Templates Like This